<script setup>
import { ref, reactive } from 'vue'
import config from '@/assets/js/config'
const formRules = reactive({
    name: [
        {
            required: true,
            message: '请输入名称',
        },
    ],
})
const form = reactive({})
const formRef = ref(null)
const onBackupFileChange = function (e) {
    console.log(e)
}
function resetAction() {}
function saveAction() {}
</script>
<template>
    <div class="white-box d-flex-1">
        <el-form
            ref="formRef"
            :model="form"
            label-width="120px"
            size="large"
            :rules="formRules"
            class="mt-20"
        >
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form-item label="禁止ping：">
                        <el-switch v-model="form.ping" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form-item label="允许访问IP：">
                        <el-input
                            v-model="form.name"
                            placeholder="请输入"
                            type="textarea"
                            rows="10"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form-item label="加密证书：">
                        <el-upload
                            class="upload-demo"
                            :action="config.uploadUrl"
                            :on-change="onBackupFileChange"
                            :show-file-list="false"
                        >
                            <el-button type="primary">上传证书</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col
                    :md="24"
                    :lg="12"
                    class="text-right"
                    style="margin-top: 100px"
                >
                    <el-button type="default" @click="resetAction">
                        重置
                    </el-button>
                    <el-button type="primary" @click="saveAction">
                        保存
                    </el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
